<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="key">
					<el-input class="w-[280px]" v-model="queryParams.title" clearable @keyup.enter="resetPage" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none mt-4" shadow="never">
			<div>
				<el-button type="primary" class="mb-4" @click="changItem(0,0)">
					<template #icon>
						<icon name="el-icon-Plus" />
					</template>
					添加数据
				</el-button>
			</div>
			<el-table size="large" v-loading="pager.loading" :data="pager.lists" style="width: 100%" >
				<el-table-column label="ID" prop="id" width="80" />
				<el-table-column :label="item.title" :prop="item.key"  v-for="(item,index) in titleList.list" :key="index">
					<template #default="scope">
						<div v-if="scope.row[item.key].type=='upload'" >
							<image-contain
							    :src="scope.row[item.key].value"
							    :width="45"
							    :height="45"
							    preview-teleported
							    fit="contain"
							/>
						</div>
						<div v-else-if="scope.row[item.key].type=='uploads'">
							<el-image
							  style="width: 45px; height: 45px;"
							  :src="scope.row[item.key].value[0]"
							  :preview-src-list="scope.row[item.key].value"
							  fit="cover"
							  :z-index="999"
							/>
						</div>
						<div style="display: flex;" v-else-if="scope.row[item.key].type=='checkbox'" >
							<div v-for="(item2) in scope.row[item.key].value" >{{item2}}、</div>
						</div>
						<div v-else>
							{{ scope.row[item.key].value }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="排序" prop="sort" min-width="60" />
				<el-table-column label="状态" prop="status" min-width="60" />
				<el-table-column label="时间" prop="add_time" min-width="80" />
				<el-table-column label="操作" width="120" fixed="right">
					<template #default="{ row }">
						<el-button 	type="primary" link  @click="changItem(1,row.id)">
							编辑
						</el-button>
						<el-button v-perms="['systemGroup/delete']" type="danger" link @click="handleDelete(row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>

		<el-dialog v-model="showEdit" :title="Tipstitle">
			<el-form :model="configForm.formData">
				<!-- // let sun = 'input textarea radio checkbox select upload uploads'; -->
				<div v-for="(item,index) in configForm.formList" :key="index">
					<div v-if="item.type.vlaue == 'input'">
						<el-form-item :label="item.name.vlaue" label-width="80px">
							<el-input v-model="item.inValue" autocomplete="off" placeholder="请输入" />
						</el-form-item>
					</div>
					<div v-if="item.type.vlaue == 'textarea'">
						<el-form-item :label="item.name.vlaue" label-width="80px">
							<el-input type="textarea" v-model="item.inValue" :autosize="{ minRows: 6, maxRows: 6 }"
								maxlength="200" show-word-limit clearable placeholder="请输入" />
						</el-form-item>
					</div>
					<div v-if="item.type.vlaue == 'radio'">
						<el-form-item :label="item.name.vlaue" label-width="80px">
							<el-radio-group v-model="item.inValue">
								<el-radio v-for="(item2,index2) in item.options" :label="item2.value"
									:key="index2">{{item2.label}}</el-radio>
							</el-radio-group>
						</el-form-item>
					</div>
					<div v-if="item.type.vlaue == 'checkbox'">
						<el-form-item :label="item.name.vlaue" label-width="80px">
							<el-checkbox-group v-model="item.inValue">
								<el-checkbox v-for="(item2,index2) in item.options" :label="item2.value"
									:key="index2" >{{item2.label}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</div>
					<div v-if="item.type.vlaue == 'select'">
						<el-form-item :label="item.name.vlaue" label-width="80px">
							<el-select v-model="item.inValue" placeholder="请选择" style="width: 100%" 
								size="default">
								<el-option v-for="item2 in item.options" :key="item2.value" :label="item2.label"
									:value="item2.value" />
							</el-select>
						</el-form-item>
					</div>
					<div v-if="item.type.vlaue == 'upload'" >
						<el-form-item :label="item.name.vlaue" prop="image" label-width="80px">
						    <div>
						        <div>
						            <material-picker v-model="item.inValue" :limit="1" />
						        </div>
						        <div class="form-tips">建议尺寸：240*180px</div>
						    </div>
						</el-form-item>
					</div>
					<div v-if="item.type.vlaue == 'uploads'" >
						<el-form-item :label="item.name.vlaue" label-width="80px">
						    <div>
						        <div>
						            <material-picker v-model="item.inValue" :limit="10" />
						        </div>
						        <div class="form-tips">建议尺寸：240*180px</div>
						    </div>
						</el-form-item>
					</div>
				</div>

				<el-form-item label="状态" label-width="80px">
					<el-radio-group v-model="configForm.formData.status">
						<el-radio :label="1" >开启</el-radio>
						<el-radio :label="0" >关闭</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="排序" label-width="80px">
					<el-input-number v-model="configForm.formData.sort" :min="1" :max="900" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showEdit = false">取消</el-button>
					<el-button type="primary" @click="submit()">
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>
<script lang="ts" setup name="systemSonLists">
	import { systemSonLists, detailSystem,systemSonAdd,systemSonHeader,systemSonEdit,systemSonDelete,systemSonDle } from '@/api/systemGroup'
	import { usePaging } from '@/hooks/usePaging'

	import feedback from '@/utils/feedback'
	const route = useRoute()
	const queryParams = reactive({
		title: '',
		gid: route.query.id
	})
	const titleList = reactive({
		list: [{title:'',key:''}],
	})
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: systemSonLists,
		params: queryParams,
		size: 6,

	})
	const showEdit = ref(false)
	const Tipstitle = ref('测试')

	var configForm = reactive({
		formList: [{
				name: {
					"vlaue": "测试"
				},
				param: {
					"placeholder": "",
					"value": ""
				},
				title: {
					"vlaue": "kshd"
				},
				type: {
					"vlaue": "select"
				},
				options: [
					{
						"value": "0",
						"label": "未支付"
					}
				],
				inValue:''
		}],
		formData:{
			status:1,
			sort:1,
			id:0
		}
	})

	const changItem = async (is:any,id:any) => {
		await getSystemForm();
		if(is == 0){
			showEdit.value = true;
		}else{
			var detaArr = await systemSonDelete({
				id: id
			})
			var x;
			configForm.formData.id = id;
			configForm.formList.forEach((item : any) => {
				for (x in detaArr.value){
					if(x == item.title.vlaue){
						item.inValue = detaArr.value[x].value
					}
				}
			})
			showEdit.value = true;
		}
	}
	
	const submit = () =>{
		let data:any={}
		for (let i = 0; i < configForm.formList.length; i++) {
			data[configForm.formList[i].title.vlaue] = {
				type:configForm.formList[i].type.vlaue,
				value:configForm.formList[i].inValue
			}
		}
		if(configForm.formData.id == 0){
			let arr:any = {
				gid:route.query.id,
				data:data,
				status:configForm.formData.status,
				sort:configForm.formData.sort
			}
			systemSonAdd(arr)
		}else{
			let arr:any = {
				gid:route.query.id,
				value:data,
				status:configForm.formData.status,
				sort:configForm.formData.sort,
				id:configForm.formData.id
			}
			systemSonEdit(arr)
		}
		showEdit.value = false;
		getLists()
	}
	
	const handleDelete = async (id : number) => {
		await feedback.confirm('确定要删除？')
		await systemSonDle({ id:id })
		getLists()
	}

	const getSystemForm = async () => {
		const data = await detailSystem({
			id: route.query.id
		})
		data.fields.forEach((item : any) => {
			// <!-- // let sun = 'input textarea radio checkbox select upload uploads'; -->
			if(item.type.vlaue=="checkbox"||item.type.vlaue=="uploads"){
				item.inValue = []
			}else{
				item.inValue = ''
			}
		})
		configForm.formList = data.fields;
		console.log(configForm.formList, '890');
	}
	
	const getHeader = async ()=>{
		const list = await systemSonHeader({
			id: route.query.id
		})
		titleList.list = list;
	}

	onActivated(() => {
		getLists()
	})

	getLists();
	getHeader();
</script>